<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{../myresource/zui/lib/calendar/zui.calendar.css}" rel="stylesheet">
    <link th:href="@{../myresource/zui/css/zui.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{../myresource/js/jquery-1.8.2.min.js}"></script>
    <script type="text/javascript" th:src="@{../myresource/zui/js/zui.js}"></script>
    <script type="text/javascript" th:src="@{../myresource/zui/lib/calendar/zui.calendar.js}"></script>
</head>
<body>
<!--内容区域-->
    <!-- HTML 代码 -->
    <div id="calendar" class="calendar" style="margin: 10px 10px 5px 10px;width:95%;"></div>
</body>
<script th:inline="javascript">
    /* JS 代码 */
    $('#calendar').calendar({hideEmptyWeekends:false});
    /* 增加多个事件 */
    var calendar = $('#calendar').data('zui.calendar');
    var newEvents =
        [
            {title: '吃饭了', desc: '要吃更多', start: new Date(2018,0,4,12,10,0), end: new Date(2018,1,3,13,10,0)}
        ];
    calendar.addEvents(newEvents);
    calendar.display();                       // 重新刷新当前视图
</script>
</html>